import React, { Component } from 'react';

import router from 'umi/router'; 

import { connect } from 'dva';

import DataTable from './components/data-table';
import AddFormModal from './components/add-form-modal';
import EditFormModal from './components/edit-form-modal';

import { 
  Button, 
  Spin 
} from 'antd';

import {
  messageSuccess,
  modalConfirm,
  CONFIRM_MODAL_OK,
  modalError,
} from 'utils/feedbacks';

import _ from 'lodash';

import styles from './index.css';

/**
 * FTP-列表内容
 */
class Index extends Component {

  render() {
    const { 
      queryFormState,
      addFormModalState,
      editFormModalState,
      editFormState,
    } = this.props;
    return (
      <>
        {
          !!false?
            <Spin style={{ width: "100%", paddingTop: '25%' }} tip="加载中..." size="large" />
          :
          <div className={styles.content}>
            <div className={styles.header}>
              权限管理
            </div>

            {/* 操作按钮 */}
            <div className={styles.btn_bar}>
              <Button type="primary" className={styles.btnstyle} onClick={this.addBtnClickedHandler}>新增权限角色</Button>
            </div>
            
            {/* 数据 */}
            <DataTable
              onPageChange={this.dataTablePageChangedHandler}
              onPageSizeChange={this.dataTablePageSizeChangedHandler}
              onAssociatedUsers={this.dataTableAssociatedUsersedHandler}
              onEdit={this.dataTableEditedHandler} />

            {/* 弹窗: 新增 */}
            <AddFormModal
              modalState={addFormModalState}
              onCancel={this.addFormModelCanceledHandler}
              onConfirm={this.addFormModelConfirmedHandler} />

            {/* 弹窗: 编辑 */}
            <EditFormModal
              modalState={editFormModalState}
              formState={editFormState}
              onCancel={this.editFormModelCanceledHandler}
              onConfirm={this.editFormModelConfirmedHandler} />

          </div>
        }
      </>
    )
  }
  /**
   * 编辑标签点击事件
   */
  dataTableEditedHandler = async (record) => {
    const { dispatch } = this.props;
    // const { address, remarks, gmtCreate, password, accountNum } = record;
    // //更新编辑表单数据
    // await dispatch({
    //   type: 'pages_home_system_authority/editFormStateUpdate',
    //   payload: { address, remarks, gmtCreate, password, accountNum }
    // });
    //更新弹窗状态: 打开弹窗
    await dispatch({ 
      type: 'pages_home_system_authority/editFormModalStateUpdate', 
      payload: { visible: true } 
    });
  }

  /**
   * 编辑弹窗 取消按钮点击事件
   */
  editFormModelCanceledHandler = () => {
    const { dispatch } = this.props;

    dispatch ({
      type:'pages_home_system_authority/editFormModalStateUpdate',
      payload: { visible: false },
    });

    //初始化新增表单数据
    dispatch({
      type: 'pages_home_system_authority/editFormStateUpdate',
      payload: {   
        addFormState: {
          address: '',
          remarks:'',
          accountNum:'',
          password:'',
        } 
      }
    });
  }

  /**
   * 确认编辑
   */
  editFormModelConfirmedHandler = async (fieldsValue) => {
    const { dispatch } = this.props;
    const { address, remarks, gmtCreate, password, accountNum } = fieldsValue;

    //更新弹窗状态: 关闭弹窗
    await dispatch({ 
      type: 'pages_home_system_authority/editFormModalStateUpdate', 
      payload: { visible: false } 
    });
    //初始化编辑表单数据
    await dispatch({
      type: 'pages_home_system_authority/editFormStateUpdate',
      payload: {   
        editFormState: {
          address: '',
          remarks:'',
          accountNum:'',
          password:'',
          gmtCreate: '',
        }
      }
    });
    // //发起请求
    // await dispatch({
    //   type: 'pages_home_system_authority/',
    //   payload: { jwt, address, remarks, status, name, KeyID, KeySecret, gmtCreate }
    // });

    messageSuccess('编辑成功');
    // const { queryFormState } = this.props;

    // //更新表格数据
    // dispatch({
    //   type: 'pages_home_basic_management_course_major/majorList',
    //   payload: { 
    //     jwt,
    //     ...queryFormState,
    //     reqPage: 1, 
    //     reqLimit: 10,
    //   },
    // });
  }

  /**
   * 确认新增
   */
  addFormModelConfirmedHandler = async (fieldsValue) => {
    const { dispatch } = this.props;
    const { address, remarks, accountNum, password, gmtCreate } = fieldsValue;

    //更新弹窗状态: 关闭弹窗
    await dispatch({ 
      type: 'pages_home_system_authority/addFormModalStateUpdate', 
      payload: { visible: false } 
    });
    //初始化新增表单数据
    await dispatch({
      type: 'pages_home_system_authority/addFormStateUpdate',
      payload: {   
        addFormState: {
          address: '',
          remarks:'',
          accountNum:'',
          password:'',
        } 
      }
    });
    // //发起请求
    // await dispatch({
    //   type: 'pages_home_system_authority/',
    //   payload: { jwt, address, remarks, status, name, KeyID, KeySecret, gmtCreate }
    // });

    messageSuccess('新增成功');
    // const { queryFormState } = this.props;

    // //更新表格数据
    // dispatch({
    //   type: 'pages_home_basic_management_course_major/majorList',
    //   payload: { 
    //     jwt,
    //     ...queryFormState,
    //     reqPage: 1, 
    //     reqLimit: 10,
    //   },
    // });
  }

  /**
   * 新增按钮点击事件
   */
  addBtnClickedHandler = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'pages_home_system_authority/addFormModalStateUpdate',
      payload: {
        visible: true
      }
    });
  }

  /**
   * 条件检索表单：提交
   */
  queryFormSubmittedHandler = (inputJSON) => {
    const { dispatch } = this.props;
    // 调用reducer，更新状态树上的查询条件
    dispatch({ 
      type: 'pages_home_system_authority/queryFormStateUpdate', 
      payload: inputJSON 
    });

    // //调用effects，根据更新后的查询条件，向服务器发送请求
    // dispatch({
    //   type: 'pages_home_system_authority/',
    //   payload: { 
    //     // jwt,
    //     ...inputJSON,
    //     reqPage: 1,
    //     reqLimit: 10,
    //   },
    // });
  }

  /**
   * 条件检索表单：重置
   */
  queryFormResetHandler = () => {
    // const { dispatch, jwt } = this.props;
    // // 调用reducer，更新状态树上的查询条件
    // dispatch({ type: 'pages_home_teacher_teacher_list_index/queryFormStateReset' });
    // // 调用effects，根据更新后的查询条件，向服务器发送请求
    // dispatch({
    //   type: 'pages_home_teacher_teacher_list_index/teacherPageSearchList',
    //   payload: { 
    //     jwt,
    //     status:'',
    //     name: '',
    //     majorId: '',
    //     credentialType: '',
    //     credentialNumber: '',
    //     gender: '',
    //     telephone: '',
    //     startTime: '',
    //     endTime: '',
    //     reqPage: 1,
    //     reqLimit: 10,
    //   },
    // });
  }

  /**
   * 关联用户标签点击事件
   */
  dataTableAssociatedUsersedHandler = async (record) => {
    // const confirmResult = await modalConfirm('提示', '确认关联该用户吗？');
    // if(confirmResult != CONFIRM_MODAL_OK) return;

    // const { id, status } = record;
    // // const { jwt } = this.props;
    // const { dispatch } = this.props;

    // await dispatch({
    //   type: 'pages_home_system_authority/teacherUpdateStatusById',
    //   payload: { id, status: status == '正常'? 'OFF' : 'ON' }
    // });

    // messageSuccess('关联用户成功!');

    // // 重置查询表单
    // await dispatch({ type: 'pages_home_system_authority/queryFormStateReset' });

    // const { queryFormState } = this.props;

    // 刷新列表
    // dispatch({
    //   type: 'pages_home_system_authority/', 
    //   payload: { ...queryFormState, page: 1, limit: 10, jwt }
    // });
  }

  /**
   * 新增弹窗 取消按钮点击事件
   */
  addFormModelCanceledHandler = () => {
    const { dispatch } = this.props;

    dispatch ({
      type:'pages_home_system_authority/addFormModalStateUpdate',
      payload: { visible: false },
    });

    //初始化新增表单数据
    dispatch({
      type: 'pages_home_system_authority/addFormStateUpdate',
      payload: {   
        addFormState: {
          address: '',
          remarks:'',
          name:'',
          KeyID:'',
          KeySecret:'',
        } 
      }
    });
  }

  /**
   * DataTable：翻页
   */
  // dataTablePageChangedHandler = (page, limit) => {
  //   const { dispatch, queryFormState, jwt } = this.props;
  //   dispatch({ 
  //     type: 'pages_home_system_authority/',
  //     payload: { 
  //       jwt,
  //       ...queryFormState,
  //       reqPage: page, 
  //       reqLimit: limit, 
  //     },
  //   });
  // }

  /**
   * DataTable：改变页面显示记录数
   */
  // dataTablePageSizeChangedHandler = (page, limit) => {
  //   const { dispatch, queryFormState, jwt } = this.props;
  //   dispatch({ 
  //     type: 'pages_home_system_authority/',
  //     payload: { 
  //       jwt,
  //       ...queryFormState,
  //       reqPage: page, 
  //       reqLimit: limit, 
  //     },
  //   });
  // }

  // componentDidMount () {
  //   const { dispatch, queryFormState, dataTableState: { page, limit }, jwt } = this.props;
  //   dispatch({
  //     type: 'pages_home_system_authority/teacherPageSearchList',
  //     payload: {
  //       jwt,
  //       ...queryFormState,
  //       reqPage: page,
  //       reqLimit: limit,
  //     }
  //   });
  // }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'pages_home_system_authority/allStateReset' });
  }
}

const mapStateToProps = (state) => {

  const { 
    queryFormState,
    addFormModalState,
    editFormModalState,
    editFormState,
  } = state.pages_home_system_authority;

  return {
    queryFormState,
    addFormModalState,
    editFormModalState,
    editFormState,
  }
}

export default connect (mapStateToProps) (Index);
